<template>
  <el-dialog
    title="详情"
    v-model="visible"
    width="850px"
    @close="onClose"
    :close-on-click-modal="false"
  >
    <div class="main">
      {{ queryParams.mobile }}
      <el-table v-loading="loading" size="default" :data="dataList">
        <el-table-column label="奖品名称" align="center">
          <template #default="{ row }">
            <el-link :underline="false" type="primary" @click="handleSkip(row)">{{
              row.name
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="时间" align="center" prop="createTime" />
      </el-table>
      <div style="margin-right: 10px">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getRewardListApi } from '@/api/marketing/raffle'

const total = ref(0)
const dataList = ref([])
const visible = ref(false)

const queryParams = reactive({
  clientId: '',
  lotteryId: '',
  pageNum: 1,
  pageSize: 10
})
const loading = ref(true)

/** 查询用户列表 */
function getList() {
  loading.value = true
  getRewardListApi(queryParams)
    .then((res) => {
      loading.value = false
      dataList.value = res?.data?.rows || []
      total.value = res?.data?.total || 0
    })
    .catch(() => {
      loading.value = false
      dataList.value = []
      total.value = 0
    })
}
// 跳转优惠券页面
const router = useRouter()
function handleSkip(row) {
  if (row.type === 6) {
    router.push({
      path: '/market/physicalGoods',
      query: {
        id: row.id,
        couponName: row.name,
        cityName: queryParams.cityName
      }
    })
  } else if (row.type === 88) {
    router.push({
      path: '/market/giftPack',
      query: {
        id: row.id,
        packName: row.name,
        cityName: queryParams.cityName
      }
    })
  } else {
    router.push({
      path: '/market/activity',
      query: { id: row.id, couponName: row.name, cityName: queryParams.cityName }
    })
  }
}

function onClose() {
  queryParams.pageNum = 1
  queryParams.pageSize = 10
}

function init(row, cityName, lotteryId) {
  visible.value = true
  queryParams.clientId = row.clientId
  queryParams.mobile = row.mobile
  queryParams.cityName = cityName
  queryParams.lotteryId = lotteryId
  getList()
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
:deep(.pagination-container .el-pagination) {
  right: 20px;
}
.main {
  position: relative;
  transform: translate3d(0, -30px, 0);
}
.type {
  margin-bottom: 20px;
}
</style>
